<template>
  <span class="address">
    <el-select v-model="provinceId" placeholder="选择省" style="width:120px;" @change="pFn" :disabled="disab"  @clear="clearAddr(['province','city','district'])">
      <el-option v-for="item in provinceList" :key="item.id" :label="item.name" :value="item.id"></el-option>
    </el-select>
    <el-select v-model="cityId" placeholder="选择市" style="width:120px;" @change="cFn" :disabled="disab"  @clear="clearAddr(['city','district'])">
      <el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.id"></el-option>
    </el-select>
    <el-select v-model="districtId" placeholder="选择区/县" style="width:120px;" @change="dFn" :disabled="disab"  @clear="clearAddr(['district'])">
      <el-option v-for="item in districtList" :key="item.id" :label="item.name" :value="item.id"></el-option>
    </el-select>
  </span>
</template>
<script>
import { _getAddress } from "@/http/ajax";
export default {
  props: {
    citys: {
      type: Object,
      default: null
    },
    addr_this: {
      type: Object,
      default: null
    },
    disabled: {
      type: Boolean,
      default: false
    }
    // showSelectAdd: {
    //   type: Boolean,
    //   required: true
    // }
  },
  name: "city",
  data() {
    return {
      provinceList: [],
      cityList: [],
      districtList: [],
      provinceId: "",
      cityId: "",
      districtId: "",
      disab:this.disabled
    };
  },
   watch: {
    disabled(val) {
      this.disab = val;
    }
  },
  created() {
    this.getProvince();
  },
  mounted() {
    this.$nextTick(() => {
      if (this.citys) {
        let btn = true
        Object.keys(this.citys).forEach(key => {
          if (this.citys[key]) {
            this[key] = this.citys[key];
          }else {
            btn = false
          }
        });
        if(this.provinceId){
           _getAddress(this.provinceId, res => {
            res.unshift({name:'全部',id: 0})
            this.cityList = res;
          });
        }
        if(this.cityId){
          _getAddress(this.cityId, res => {
             res.unshift({name:'全部',id: 0})
            this.districtList = res;
          });
        }
        // if(this.cityId){
        //   _getAddress(this.cityId, res => {
        //     this.districtList = res;
        //   });
        // }
        // if(btn){
        //   _getAddress(this.provinceId, res => {
        //     this.cityList = res;
        //     _getAddress(this.cityId, res => {
        //       this.districtList = res;
        //     });
        //   });
        // }
      }
    });
  },
  methods: {
    // 清除
    clearAddr(arr){
      arr.forEach(el=>{
        this.addr_this.citys[el+'Id'] = '';
        this[el+'List'] = []
      })
    },
    // 切换省
    pFn(val) {
      console.log(val);
      this.addr_this.citys['provinceId'] = val
      this.addr_this.citys['districtId'] = 0
      this.addr_this.citys['cityId'] = 0
      if(val){
        _getAddress(val, res => {
          this.districtList = [];
          this.cityId = "";
          this.districtId = "";
          res.unshift({name:'全部',id: 0})
          this.cityList = res;
        });
      }else{
         this.cityList = [{name:'全部',id: 0}]
      }
    },
    // 切换市
    cFn(val) {
      console.log(val);
      this.addr_this.citys['cityId'] = val
      this.addr_this.citys['districtId'] = 0
      this.districtId = "";
      if(val){
        _getAddress(val, res => {
          res.unshift({name:'全部',id: 0})
          this.districtList = res;
        });
      }else{
        this.districtList = [{name:'全部',id: 0}]
      }
    },
    // 切换区
    dFn(val) {
      console.log(val);
      this.addr_this.citys['districtId'] = val
    },
    getProvince() {
      _getAddress(0, res => {
        console.log(0)
        // res.unshift({name:'全国',id:0})
        this.provinceList = res;
      });
    },
    saveAdd() {
      this.addrShow = `${this.curProvince.name}-${this.curCity.name}-${this.curDistrict.name}-${this.curStreet.name}`;
      this.showSelectAdd = false;
      this.addr_this.addr_obj = {
        province: this.curProvince,
        city: this.curCity,
        district: this.curDistrict,
        street: this.curStreet
      };
      console.log(this.addr_this.addr_obj);
    },
    dataInit(){
      this.provinceId = "";
      this.cityId = "";
      this.districtId = ""
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
